<script setup>
import { ossImg } from "@/utils/utils";
import { onMounted, ref } from "vue";
import { onUnload, onShow, onShareAppMessage, onHide } from "@dcloudio/uni-app";
import { getDistance } from "@/services/address";
import { ShareConfig } from "@/campaign/pages/2023airycake/config";

const emdlz = getApp().emdlz
const locationInfo = ref({ latitude: 0, longitude: 0 })
const storeList = ref([])
const loadStatus = ref(true)

let enterTime = "";
let outTime = "";
let stayTime = "";

onMounted(() => {
  // 用户进入时间
  getApp().accessLogAdd();
  enterTime = new Date();
})

onShow(() => {
  getApp().accessLogAdd();
  uni.getLocation({
    type: "gcj02",
    success(res) {
      locationInfo.value.latitude = res.latitude;
      locationInfo.value.longitude = res.longitude;
      console.log('调用第一次')
      setTimeout(getStoreList, 400);
    },
    fail(err) {
      uni.getSetting({
        success: (res) => {
          if (
              typeof res.authSetting["scope.userLocation"] != "undefined" &&
              !res.authSetting["scope.userLocation"]
          ) {
            wx.showModal({
              title: "提示",
              content: "当前位置信息未开启，开启后可查看附近门店信息",
              success: (res) => {
                if (res.confirm) {
                  //打开设置 让用户点击允许 这样可以重新获取
                  wx.openSetting({
                    success: (res) => {
                      if (res.authSetting["scope.userLocation"]) {
                        // 授权成功，重新定位即可
                        wx.getLocation({
                          type: "gcj02",
                          altitude: true,
                          isHighAccuracy: true,
                          success: (res) => {
                            console.log('调用第二次')
                            locationInfo.value.latitude = res.latitude;
                            locationInfo.value.longitude = res.longitude;
                            setTimeout(getStoreList, 400);
                          },
                          fail: (err) => {
                            console.log(err);
                          },
                        });
                      } else {
                        // 没有允许定位权限
                        wx.showToast({
                          title: "没有允许定位权限",
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          }
        },
      });
    },
  });
})

const uploadStayTimeEvent = (evt) => {
  console.log('---------stayTimeEvt', evt)
  if (!enterTime) return
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log('----------stayTime', stayTime)
  emdlz('track','event','oreo_cake_onepack_store_list_page','click','close_list_page','');
  emdlz('track','event','oreo_cake_onepack_store_list_page','view','list_page', stayTime);
}

onUnload(() => uploadStayTimeEvent('onBeforeMount'))
onHide(() => uploadStayTimeEvent('hide'))

onShareAppMessage(() => ShareConfig())

const backPrevPage = () => uni.navigateBack()

const getStoreList = async () => {
  const { data } = await getDistance({ type: 2, ...locationInfo.value })
  storeList.value = data || []
  loadStatus.value = false
}
</script>

<template>
  <view
    class="main-content"
    :style="{ backgroundImage: `url(${ossImg('others/2023cakeDiy/store/store_bg.png')})`,}"
  >
    <view class="w-375px px-28px pt-34px pb-61px box-border">
      <image
        class="w-55px h-20px block"
        :src="ossImg('others/2023cakeDiy/prev.png')"
        @click.stop="backPrevPage"
      ></image>
    </view>
    <view
      class="store-list"
      :style="{ backgroundImage: `url(${ossImg('others/2023cakeDiy/store/card.png')})`,}"
    >
      <view class="store-tips" v-if="!storeList.length">{{ loadStatus ? '正在获取附近门店...' : '附近没有找到门店' }}</view>
      <scroll-view class="h-330px" :scroll-y="true">
        <view class="store-scroll">
          <view
            class="store-card"
            v-for="item in storeList"
            :key="item.id"
          >
            <view class="store-info flex-1">
              <view class="store-name text-18px font-bold">{{ item.name }}</view>
              <view class="store-address text-10px">{{ item.address }}</view>
            </view>
            <image
              class="w-24px h-36px"
              :src="ossImg('others/2023cakeDiy/store/location.png')"
            ></image>
          </view>
        </view>
      </scroll-view>
      <!--   卡片底部小饼干   -->
      <image
        class="w-181px h-111px absolute -bottom-32px -right-22px"
        :src="ossImg('others/2023cakeDiy/store/cookie.png')"
      ></image>
    </view>
  </view>
</template>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.store-tips {
  text-align: center;
  color: white;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 20px 0;
}
.main-content {
  width: 100%;
  min-height: 100vh;
  background-color: #0263E6;
  background-position: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.store-list {
  width: 307px;
  height: 478px;
  position: relative;
  background-position: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 96px;
  box-sizing: border-box;
  .store-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .store-card {
    width: 232px;
    height: 75px;
    border-radius: 15px;
    background-color: #FCC9A8;
    display: flex;
    align-items: center;
    padding: 0 19px;
    box-sizing: border-box;
    color: #570A0A;
    margin-bottom: 10px;
    letter-spacing: 2px;
    & > image {
      margin-left: 10px;
    }
    .store-name {
      width: 152px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: 18px;
    }
    .store-address {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-height: 1.2;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      margin-top: 6px;
    }
  }
}
</style>
